<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页栏目/编辑页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
</head>
<body>
    <!--设置参数 -->
    <div style="display: none;" name="setParamTable">
        <table class="set-Params" id="set-Params" lay-filter="set-Params"></table>
        <div style="text-align: center;margin-top: 15px">
            <button class="layui-btn saveData">保存</button>
            <button class="layui-btn addData">添加</button>
            <button class="layui-btn layui-btn-danger cancelData">取消</button>
        </div>
    </div>
    <script type="text/html" id="setParamTableRightboor">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <div class="layui-fluid ccpui-addedModifiedPages" style="padding: 10px;position: absolute;left: 0;overflow: auto;top: 0; bottom: 0;right: 0;">
        <div class="layui-row">
            <div class="layui-col-xs12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <a href="${ctx}/system/indexColumn/view/list" title="返回">
                            <i class="layui-icon layui-icon-return"></i>
                        </a>
                        <span class="indexColumnTitle">新增栏目</span>
                    </div>
                    <div class="layui-card-body">
                        <form class="layui-form sysIndexColumnAddForm" action=""  lay-filter="sysIndexColumnAddForm">
                            <div class="layui-form-item">
                                    <div class="layui-col-xs6">
                                        <label class="layui-form-label">栏目名称<span style='color:red'>*</span></label>
                                        <div class="layui-input-block">
                                            <input type="tel" name="name" lay-verify="required" autocomplete="off"
                                                   class="layui-input colName" maxlength="50">
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <label class="layui-form-label">栏目别名</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="alias" lay-verify="required" autocomplete="off"
                                                   class="layui-input colAlias" maxlength="50">
                                        </div>
                                    </div>
                            </div>
                            <div class="layui-form-item">
                                    <!-- <div class="layui-col-xs6">
                                        <label class="layui-form-label">栏目分类</label>
                                        <div class="layui-input-block">
                                            <select name="catalog">
                                                <option value="">请选择分类</option>
                                                <#if catalogList?exists>
                                                    <#list catalogList as item>
                                                        <option value="${item.typeId}">${item.typeName}</option>
                                                    </#list>
                                                </#if>
                                            </select>
                                        </div>
                                    </div>-->
                                    <div class="layui-col-xs6">
                                        <label class="layui-form-label">栏目类型</label>
                                        <div class="layui-input-block">
                                            <select name="colType">
                                                <option value="0">一般类型栏目</option>
                                                <option value="1">图表类型栏目</option>
                                                <option value="2">日历类型栏目</option>
                                                <option value="3">滚动类型栏目</option>
                                            </select>
                                        </div>
                                    </div>
                            </div>
                            <div class="layui-form-item">
                                    <div class="layui-col-xs6">
                                        <label class="layui-form-label">栏目URl<span style='color:red'>*</span></label>
                                        <div class="layui-input-block">
                                            <input type="text" name="colUrl" lay-verify="required" autocomplete="off"
                                                   class="layui-input" maxlength="50">
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <label class="layui-form-label">展示效果</label>
                                        <div class="layui-input-block">
                                            <select name="showEffect">
                                                <option value="0">默认效果</option>
                                                <option value="1">走马灯</option>
                                                <option value="2">幻灯片</option>
                                            </select>
                                        </div>
                                    </div>
                            </div>
                            <!--<div class="layui-form-item">
                                    <div class="layui-col-xs6">
                                        <label class="layui-form-label">数据加载方式</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="dataMode" lay-filter="dataModeCheck" value="0"
                                                   title="Service方法" checked>
                                            <input type="radio" name="dataMode" lay-filter="dataModeCheck" value="1"
                                                   title="自定义查询方式">
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6">

                                    </div>
                            </div>
                            <div class="layui-form-item">
                                    <div class="layui-col-xs6">
                                        <div class="layui-form-item checkDataMode_0">
                                                <label class="layui-form-label">方法路径</label>
                                                <div class="layui-input-block">
                                                    <div style="width: 75%;display: inline-block">
                                                        <input type="text" class="dataFromService layui-input" autocomplete="off" />
                                                    </div>
                                                    <a class="layui-btn columnSetParas">参数设置</a>
                                                </div>
                                        </div>
                                        <div class="layui-form-item checkDataMode_1" style="display: none">
                                            <label class="layui-form-label">自定义查询</label>
                                            <div class="layui-input-block">
                                                <div style="width: 75%;display: inline-block">
                                                    <input type="text" class="layui-input dataFromQuery" disabled  />
                                                </div>
                                                <a class="layui-btn columndataFromService">选择</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6">

                                    </div>
                            </div>-->
                            <div class="layui-form-item">
                                    <div class="layui-col-xs6">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">是否公共栏目</label>
                                            <div class="layui-input-block" style="width: auto;">
                                                <input type="radio" name="isPublic" value="1" title="是">
                                                <input type="radio" name="isPublic" value="0" title="否" checked>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <label class="layui-form-label">栏目高度<span style='color:red'>*</span></label>
                                        <div class="layui-input-block">
                                            <input type="text" name="colHeight" lay-verify="colHeight|number" autocomplete="off" class="layui-input" >
                                        </div>
                                    </div>
                            </div>
                            <div class="layui-form-item">
                                    <div class="layui-col-xs6">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">是否支持刷新</label>
                                            <div class="layui-input-block" style="width: auto;">
                                                <input type="radio" name="supportRefresh" value="1" title="是">
                                                <input type="radio" name="supportRefresh" value="0" title="否" checked>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <label class="layui-form-label">刷新时间<span style='color:red'>*</span></label>
                                        <div class="layui-input-block">
                                            <input type="text" name="refreshTime" autocomplete="off" class="layui-input" lay-verify="colHeight|number">
                                        </div>
                                    </div>
                            </div>
                            <div class="layui-form-item">
                                    <div class="layui-col-xs6">
                                        <label class="layui-form-label">描述</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="memo" autocomplete="off" maxlength="128" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">是否分页</label>
                                            <div class="layui-input-block" style="width: auto;">
                                                <input type="radio" name="needPage" value="1" title="是">
                                                <input type="radio" name="needPage" value="0" title="否" checked>
                                            </div>
                                        </div>
                                    </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">模板HTML</label>
                                <div class="layui-input-block" style="width: 80%">
                                    <textarea placeholder="请输入内容" name="templateHtml" class="layui-textarea" style="height: 250px"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item" style="margin: 5px 0;text-align: center">
                                <div class="layui-input-block" style="text-align: center">
                                    <a  lay-submit lay-filter="indexColumnForm" class="layui-btn">保存</a>
                                    <a  href="${ctx}/system/indexColumn/view/list" class="layui-btn layui-btn-danger">返回</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="indexColumnErcustomQuery" style="display: none">
        <tabel  id="indexColumnErcustomQuery" lay-filter="indexColumnErcustomQuery"></tabel>
        <div style="text-align: center;margin-top: 15px">
            <button class="layui-btn saveData">保存</button>
            <button class="layui-btn layui-btn-danger cancelData">取消</button>
        </div>
    </div>
    <script type="text/html" id="selectDataType">
        <select name="type" class="selectDataType" lay-ignore style="width: 150px;height: 28px;">
            <option value="string">string</option>
            <option value="int">int</option>
            <option value="float">float</option>
            <option value="double">double</option>
            <option value="byte">byte</option>
            <option value="short">short</option>
            <option value="long">long</option>
            <option value="boolean">boolean</option>
            <option value="date">date</option>
        </select>
    </script>
    <script type="text/html" id="selectValueSource">
        <select name="mode" class="selectValueSource" lay-ignore style="width: 150px;height:28px;">
            <option value="0">固定值</option>
            <option value="1">动态传入</option>
            <option value="2">脚本</option>
        </select>
    </script>
    <script src="${ctx}/public/component.js" type="text/javascript"></script>
    <script src="${ctx}/layui/layui.js"></script>
    <script>
        layui.config({
            base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
        }).extend({
            index: 'index' //主入口模块
        }).use(['index','form', 'layer', 'table','setter','common','commons','totalFilter'], function () {
            var form = layui.form,setter=layui.setter,layer = layui.layer,$ = layui.jquery,table = layui.table,
            common=layui.common,commons=layui.commons,totalFilter=layui.totalFilter;
           var serverData=[];//sevcer方法保存
            var indexMethod='0';//判断数据加载方式
            var id='${id}';
            form.render();
            $('body > .indexColumnErcustomQuery').remove();
            $('body').append($('.indexColumnErcustomQuery'));
            $('body >[name="setParamTable"]').remove();
            $('body').append($('[name="setParamTable"]'));
            //自动生成别名
            $(".sysIndexColumnAddForm .colName").change(function () {
                var str = $(this).val();
                if (str == "") return;
                var arrRslt = component.chineseToPinyinAlias(str);
                $(".sysIndexColumnAddForm .colAlias").val(arrRslt[0]);
            });


            //数据加载方式监听
            form.on('radio(dataModeCheck)', function (data) {
                var selectValu = data.value;
                if (selectValu == '0') {
                    indexMethod='0';
                    $(".checkDataMode_1").hide();
                    $(".checkDataMode_0").show();
                } else {
                    indexMethod='1';
                    $(".checkDataMode_1").show();
                    $(".checkDataMode_0").hide();
                }
                form.render();
            });
            //自定义查询方式
            $(".checkDataMode_1 .columndataFromService").click(function () {
               layer.open({
                    type: 1,
                    title: '选择自定义查询',
                    shadeClose: false,
                    shade: 0.001,
                    maxmin: false,
                    area: ['500px', '590px'],
                    content: $('.indexColumnErcustomQuery'),
                    success:function(layor,index) {
                        table.render({
                            elem: '#indexColumnErcustomQuery',
                            title: '首页栏目信息列表',
                            data:${dataFromQueryList}, //数据接口
                            page: true, //开启分页
                            height: 480,
                            cols: [
                                [ //表头
                                    {type: 'radio',},
                                    {field: 'name', title: '名称', align: 'center'},
                                    {field: 'alias', title: '别名', align: 'center'},
                                    {field: 'objName', title: '栏目名称', align: 'center',}
                                ]
                            ]
                        });
                        $(".indexColumnErcustomQuery .saveData") .unbind('click');
                       $(".indexColumnErcustomQuery .saveData") .bind('click',function () {
                           var checkStatus = table.checkStatus('indexColumnErcustomQuery')
                               ,data = checkStatus.data;
                           $("input.dataFromQuery").val(data[0].alias);
                            layer.close(index);
                            return false;
                       });
                        $(".indexColumnErcustomQuery .cancelData") .click(function () {
                            layer.close(index);
                            return false;
                        })
                    }
                });
               return false;
            });

            //设置参数
            var limitData=0;//解决table  bug不开启分页只能显示10条
            function renderTable(data,len) {
                len?(limitData=len):0;
                table.render({
                    elem: '#set-Params',
                    cellMinWidth: 80,
                    title: 'method列表',
                    height:445,
                    page:false,
                    data:data,
                    limit:limitData,
                    cols: [
                        [{field: 'name', title: '参数名', align:'center',edit: 'text'},
                         {field: 'type',align:'center', title: '参数类型',templet: '#selectDataType'},
                         {field: 'mode',align:'center', title: '值来源',templet: '#selectValueSource'},
                         {field: 'value', align:'center',title: '参数值', edit: 'text'},
                        {title:'管理', align:'center', toolbar: '#setParamTableRightboor'}
                        ]
                    ],
                });
            }
            $('.checkDataMode_0 .columnSetParas').click(function () {
                var val = $('input.dataFromService').val();
                layer.open({
                    type: 1,
                    title: '设置参数',
                    shadeClose: true,
                    shade: false,
                    maxmin: false,
                    area: ['893px', '556px'],
                    content: $('[name="setParamTable"]'),
                    success: function (layor,index) {
                        if(serverData){
                            var len=serverData.length;
                            renderTable(serverData,len);
                            var echoDisplay =  table.cache["set-Params"];
                            modeData(echoDisplay)
                        }else{
                            renderTable([]);
                        }
                        table.on('tool(set-Params)', function (obj) {
                            switch (obj.event) {
                                case "del":
                                    layer.confirm("你确定要删除么？", function(){
                                            var oldData =  table.cache["set-Params"];
                                            oldData.splice(obj.tr.data('index'),1);
                                            layer.alert("删除成功");
                                            limitData--;
                                             table.reload('set-Params',{data : oldData,limit: limitData});
                                        });
                                    break;
                            }
                        });
                        function typeData(oldData){
                            $('[name="setParamTable"] .selectDataType').each(function (i,item) {
                                oldData[i].type=$(this).val();
                            });
                            $('[name="setParamTable"] .selectValueSource').each(function (i,item) {
                                oldData[i].mode=$(this).val();
                            });
                            return oldData;
                        }
                        function modeData(oldData){
                            $('[name="setParamTable"] .selectDataType').each(function (i,item) {
                                $(this).val( oldData[i].type);
                            });
                            $('[name="setParamTable"] .selectValueSource').each(function (i,item) {
                                $(this).val(oldData[i].mode);
                            });
                            return oldData;
                        }
                        $('[name="setParamTable"] .addData').unbind('click');
                        $('[name="setParamTable"] .addData').bind('click',function () {
                            limitData++;
                            var oldData =  table.cache["set-Params"];
                            oldData= typeData(oldData);
                            oldData.push({'name':'','type':'','mode':'','value':''});
                            table.reload('set-Params',{data : oldData,limit: limitData});
                            var oldDatas =  table.cache["set-Params"];
                            modeData(oldDatas);
                        });
                        $('[name="setParamTable"] .cancelData').click(function () {
                          layer.close(index);
                        });
                        $('[name="setParamTable"] .saveData').click(function () {
                            serverData=typeData(table.cache["set-Params"]);
                            layer.close(index);
                        })
                    }
                });
            });
            var index = parent.layer.getFrameIndex(window.name);
            if(id){
                $(".layui-card-header .indexColumnTitle").html('编辑栏目');
                $.ajax({
                    url: serverPath.systemPath + setter.sysLinkPath + "indexColumn/get",
                    type: "get",
                    dataType: 'json',
                    data: {id:id},
                    success: function (data) {
                        var returnDate = data.data;
                        if (commons._filterRecord(data)) {
                            form.val('sysIndexColumnAddForm', {
                                "name": returnDate.name,
                                "alias": returnDate.alias,
                                "catalog": returnDate.catalog,
                                "colType": returnDate.colType,
                                "dataMode": returnDate.dataMode+'',
                                "dataFromName": returnDate.dataFromName,
                                "dsAlias": returnDate.dsAlias,
                                "dsName": returnDate.dsName,
                                "colHeight": returnDate.colHeight,
                                "colUrl": returnDate.colUrl,
                                "templateHtml": returnDate.templateHtml,
                                "isPublic": returnDate.isPublic+'',
                                "orgId": returnDate.orgId,
                                "supportRefresh": returnDate.supportRefresh+'',
                                "showEffect": returnDate.showEffect,
                                "memo": returnDate.memo,
                                "refreshTime":returnDate.refreshTime,
                                "needPage": returnDate.needPage+''
                            });
                            if( returnDate.dataMode==0){
                                $("input.dataFromService").val(returnDate.dataFrom);
                                $(".checkDataMode_1").hide();
                                $(".checkDataMode_0").show();
                                indexMethod='0';
                            }else{
                                $("input.dataFromQuery").val(returnDate.dataFrom);
                                $(".checkDataMode_1").show();
                                $(".checkDataMode_0").hide();
                                indexMethod='1';
                            }
                            serverData=JSON.parse(returnDate.dataParam);
                        } else {
                            layer.alert(data.msg);
                        }
                    }
                });
                form.on('submit(indexColumnForm)', function (data) {
                    var dataFromQuery = $("input.dataFromQuery").val();
                    var dataFromService = $("input.dataFromService").val();
                    indexMethod=='0'?(data.field.dataFrom=dataFromService):(data.field.dataFrom=dataFromQuery);
                    data.field.dataParam=JSON.stringify(serverData);
                    data.field.id=id;
                    $.ajax({
                        url: serverPath.systemPath + setter.sysLinkPath + "indexColumn/add",
                        type: "POST",
                        dataType: 'json',
                        data:data.field,
                        success: function (data) {
                            if (commons._filterRecord(data)) {
                                layer.alert(data.msg, {skin: 'btn-class'},function (index1) {
                                    window.location.href =serverPath.systemPath+setter.sysLinkPath+"indexColumn/view/list";
                                    common.bulletWindow(index);
                                    layer.close(index1);
                                });
                            } else {
                                layer.alert(data.msg);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert("保存失败！" + XMLHttpRequest.status);
                        },
                    });
                });
            }else{
                $(".layui-card-header .indexColumnTitle").html('新增栏目');
                form.on('submit(indexColumnForm)', function (data) {
                    var dataFromQuery = $("input.dataFromQuery").val();
                    var dataFromService = $("input.dataFromService").val();
                    indexMethod=='0'?(data.field.dataFrom=dataFromService):(data.field.dataFrom=dataFromQuery);
                    data.field.dataParam=JSON.stringify(serverData);
                    $.ajax({
                        url: serverPath.systemPath + setter.sysLinkPath + "indexColumn/add",
                        type: "POST",
                        dataType: 'json',
                        data:data.field,
                        success: function (data) {
                            if (commons._filterRecord(data)) {
                                layer.alert(data.msg, {skin: 'btn-class'},function (index1) {
                                    window.location.href =serverPath.systemPath+setter.sysLinkPath+"indexColumn/view/list";
                                    bulletWindow(index);
                                    layer.close(index1);
                                });
                            } else {
                                layer.alert(data.msg);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert("保存失败！" + XMLHttpRequest.status);
                        },
                    });
                });
            }
        });

    </script>
</body>
</html>